<template>
	<view>
	<view class="container">
	  <scroll-view class="tabBar"  scroll-x="true" scroll-with-animation="true">
	  			<text style="margin-right: 25rpx;" :class="{'active':isActive === index}"  v-for="(item,index) in tabTile" :key="index" @click="selectTitle(index)">
	  					{{item.text }}
	  			</text>		
	  		</scroll-view>
			<view class="lineStyle"></view>
	  <view class="ipt">
	  <image class="iptpic" mode="scaleToFill" src="/static/image/index/sousuo.png"/>
	    <input class="input" @confirm="doSearch" @blur="blurSearch" v-model="selectName" placeholder="请输入搜索内容"  placeholder-style="font-size: 26rpx;" />
	  </view> 
	<view class="tabBarCenter">
	    <view style=" width: 100rpx;display: flex;justify-content: center;align-items: center;" :class="{'activeGreen':activeCenter === index}"  v-for="(item,index) in tabTileCenter" :key="index"
	  @click="selectCenterTitle(index)">{{item.text}}</view>
	  </view>
	  <view class="content" v-for='(item,index) in dataList' :key='item.id'>
	    <view class="list"  @click="gotoParticulars(item)">
	      <view class="t-top">
	      <view class="top-l">
	         单号：{{item.invoicesJson.relevanceNo}}
	      </view>
	          <view :class="activeCenter==0?'noStyle':'aready'">{{activeCenter==0? '未入库':'完成'}}</view>
	      </view>
	      <view class="top">
	        <view class="top-left">
	          <text>入库编号：{{item.invoicesNo}}</text>
	          <text>供应商：<text class="value">{{item.invoicesJson.companyName}}</text></text>
	           <text>物料种类：<text class="value">{{item.kind}}</text></text>
	          <text>采购员：<text class="value">{{item.employeeName}}</text><text style="margin-left: 40rpx;">收货时间：<text class="value">{{item.updateTime}}</text></text></text>
			   <text>项目名称：{{item.projectName?item.projectName:'--'}}</text>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
	</view>
</template>
<script>
	import * as api from '@/utils/api.js';
	export default {
		data() {
			return {
				selectName:'',
				activeCenter:0,
					isActive: 0,
				  tabTile: [
				      { value: 2210, text: '采购入库' },
				      { value: 2211, text: '生产入库' },
				       { value: 2215, text: '外协入库' },
				      { value: 2214, text: '委外入库' },
				       { value: 2212, text: '生产退库' },
				       { value: 2213, text: '销售退库' },
				      { value: 2216, text: '调拨入库' },
				    ],
				    tabTileCenter:[
				      { id: 2200, text: '待入库' },
				      { id: 2201, text: '已入库' },
				    ],
				    tabIndex: 0,
				    taCenterIndex:0,
					dataList:[],
					type:'',
					invoicesJson:'',
					status:'',
			}
		},
		mounted(){
			this.type=2210
			this.status=2200
			this.stayList()
		},
		methods: {
			// 搜索
			blurSearch(){
			   this.stayList()
			},
			// 搜索回车
			doSearch(){
				this.stayList()
			},
			stayList(data) {
				let obj = {
					pageSize:999,
					search: this.selectName,
					currentPage: 1,
					status:this.status,
					beginTime:'',
					finishTime:'',
					type:this.type,
				}
				api.purchasePutList(obj).then(res => {
					console.log('res-->>', res)
					if(res.code == 0){
						let data = res.data
						this.dataList = data.result
						this.dataList.forEach(item=>{
						item.invoicesJson = JSON.parse(item.invoicesJson);
				
						})
					
						
					}
					
				})
			},
			  // 选中title
			  selectTitle(index) {
				  console.log('oooo--->',this.tabTile[index].value)
					this.isActive = index
					this.type=this.tabTile[index].value
					this.stayList() 
			  },
			    // 选中 centerTitle
			  selectCenterTitle(index) {
			 this.activeCenter = index
			 this.status=this.tabTileCenter[index].id
			   console.log('ooo999o--->', this.status)
				this.stayList()  
			 
			  },
			  // 跳转到详情
			  gotoParticulars(item){
				 console.log('item--->',item) 
			    uni.navigateTo({
			      url: "/subcontractList/storage/materialIn/materialInDetail?id="+item.id+"&status="+this.status
			    })
			    
			  },
		}
	}
</script>
<style>
	.noStyle{
		color:red;
		font-size: 24rpx;
		width: 100rpx;
		height: 50rpx;
		background: white;
		border-radius: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.aready{
		color:green;
		font-size: 24rpx;
		width: 100rpx;
		height: 50rpx;
		background: white;
		border-radius: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.value{
		color: #8b7ed0;
	}
	.lineStyle{
		height: 80rpx;
	}
	.ipt{
	  width: 90%;
	  height: 80rpx;
	  background: white;
	  border-radius: 20rpx;
	  margin: 15rpx auto;
	  display: flex;
	  align-items: center;
	  box-shadow: 0 0 6rpx 3rpx #ccc;
	  font-size: 24rpx;
	}
	.iptpic{
	  width: 40rpx;
	  height: 50rpx;
	  margin-left: 30rpx;
	}
	.input{
	  background: white;
	}
	.container{
		background: ;
		height: 100vh;
	}
	.navTitle{
		font-size: 28rpx;
	}
		.active{
			position: relative;
			vertical-align: middle;
			font-size: 28rpx;
			color:green;
			border-bottom:3rpx solid green;
		}
		.active::after {
			content: "";
			position: absolute;
			width: 100rpx;
			height: 8rpx;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		} 
.tabBar{
  white-space: nowrap;
  width: 100%;
  background: white;
  font-size: 28rpx;
  display: flex;
  padding: 0 25rpx;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  align-items: center;
  height: 90rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.content{
  padding: 0 28rpx;
}
.list{
  background: white;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  border: #eee solid 2rpx;
}
.t-top{
  width: 100%;
  height: 60rpx;
  background: #167696;
  border-radius: 20rpx 20rpx 0 0;
 line-height: 60rpx;
 font-size: 24rpx;
 color: white;
display: flex;
align-items: center;
justify-content: space-around;
 
}
.bottom{
  border-top: 2rpx solid #eee;
 font-size: 24rpx;
 height: 60rpx;
 display: flex;
 justify-content: space-around; 
 align-items: center;
 margin-left: -20rpx;
}
.bottom-left{
   width: 70rpx;
  height: 36rpx;
  color: #455da3;
  border: #455da3 2rpx solid;
  display: flex;
  font-size: 24rpx;
  justify-content: space-around;
  align-items: center;
  border-radius: 5rpx;
}
.top{
  display: flex;
  align-content: center;
  justify-content: space-between;
  /* align-items: center; */
  font-size: 24rpx;
  color: #333;
   padding-left: 30rpx;
  
}
.top-left{
   display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  padding: 20rpx 0;
  font-size: 24rpx;
}
.to-right{
 padding-top: 30rpx;
}
.redColor{
  color: red
}
.top-right{
  width: 100rpx;
  height: 36rpx;
  border: white 2rpx solid;
  display: flex;
  font-size: 24rpx;
  justify-content: center;
  align-items: center;
  border-radius: 18rpx;
}
.tabBarCenter{
 font-size: 24rpx;
 color: #167696;
  width: 200rpx;
  height: 70rpx;
  display: flex;
  margin: 0 auto;
  border: #53ab8b solid 2rpx;
}
.tabBarCenterTitle{
   width: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
}
.activeGreen{
  background: #167696;
  color: white;
}

</style>
